<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词汇学习 - 墨语智学</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2962FF',
                        secondary: '#1A237E',
                        success: '#4CAF50',
                        error: '#F44336'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    },
                    fontFamily: {
                        'sans': ['Poppins', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            font-family: 'Poppins', sans-serif;
            background-color: #F5F7FF;
        }
        .glass-effect {
            backdrop-filter: blur(8px);
            background-color: rgba(255, 255, 255, 0.95);
        }
        .card-flip {
            perspective: 1000px;
        }
        .card-flip-inner {
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        .card-flip:hover .card-flip-inner {
            transform: rotateY(180deg);
        }
        .card-front, .card-back {
            backface-visibility: hidden;
        }
        .card-back {
            transform: rotateY(180deg);
        }
        .word-card {
            transition: all 0.3s ease;
        }
        .word-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(41, 98, 255, 0.1);
        }
        .dropdown-enter {
            opacity: 0;
            transform: translateY(-10px);
        }
        .dropdown-enter-active {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.2s ease;
        }
        .dropdown-exit {
            opacity: 1;
            transform: translateY(0);
        }
        .dropdown-exit-active {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.2s ease;
        }
    </style>
</head>
<body>
    <!-- 导航栏 (与首页一致) -->
    <nav class="flex items-center justify-between px-6 lg:px-12 h-16 bg-white/90 backdrop-blur-md fixed top-0 left-0 right-0 z-50 border-b border-blue-50">
        <div class="flex items-center gap-8 lg:gap-16">
            <a href="墨语智学首页.html" class="flex items-center gap-3">
                <span class="text-primary text-2xl font-bold tracking-tight">墨语智学</span>
            </a>
            <div class="hidden lg:flex items-center gap-8">
                <a href="墨语智学计划.html" class="text-gray-700 hover:text-primary transition-colors font-medium">备考规划</a>
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">在线教学</a>
                <a href="墨语智学真题.html" class="text-gray-700 hover:text-primary transition-colors font-medium">真题练习</a>
                <a href="#" class="text-gray-700 hover:text-primary transition-colors font-medium">学习社区</a>
            </div>
        </div>
        
        <!-- 动态登录/用户区域 -->
        <div class="flex items-center gap-4 lg:gap-6" id="auth-section">
            <div id="login-btn-container">
                <a href="墨语智学登录.html" class="flex items-center px-4 lg:px-6 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                    <span class="whitespace-nowrap font-medium text-sm lg:text-base">登录</span>
                </a>
            </div>
            <a href="墨语智学聊天.html" class="flex items-center px-4 lg:px-6 py-2 bg-primary text-white rounded-button hover:bg-secondary transition-colors">
                <span class="whitespace-nowrap font-medium text-sm lg:text-base">免费试用</span>
            </a>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="pt-24 pb-16 max-w-[1440px] mx-auto px-6">
        <!-- 词汇学习头部 -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
                <h1 class="text-2xl lg:text-3xl font-bold text-secondary mb-2">词汇强化学习</h1>
                <p class="text-gray-600">通过科学记忆方法掌握核心词汇</p>
            </div>
            <div class="flex gap-3 mt-4 md:mt-0">
                <button class="flex items-center gap-2 px-4 lg:px-6 py-2 bg-primary text-white rounded-button hover:bg-secondary transition-colors">
                    <i class="fas fa-plus"></i>
                    <span>添加词汇</span>
                </button>
                <button class="flex items-center gap-2 px-4 lg:px-6 py-2 bg-white text-gray-700 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors">
                    <i class="fas fa-filter"></i>
                    <span>筛选</span>
                </button>
            </div>
        </div>

        <!-- 学习进度 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-secondary mb-2">今日学习进度</h3>
                        <p class="text-gray-600 text-sm">已完成 15/20 个词汇</p>
                    </div>
                    <div class="w-16 h-16 relative">
                        <svg class="w-full h-full" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#E0E0E0" stroke-width="2"/>
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#2962FF" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="25" stroke-linecap="round"/>
                        </svg>
                        <span class="absolute inset-0 flex items-center justify-center font-bold text-primary">75%</span>
                    </div>
                </div>
                <div class="mt-4 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 75%"></div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-secondary mb-2">已掌握词汇</h3>
                        <p class="text-gray-600 text-sm">总计 486 个词汇</p>
                    </div>
                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center text-success text-2xl">
                        <i class="fas fa-check-circle"></i>
                    </div>
                </div>
                <div class="mt-4 flex justify-between text-sm text-gray-500">
                    <span>本周新增: 32</span>
                    <span>上月新增: 128</span>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-secondary mb-2">待复习词汇</h3>
                        <p class="text-gray-600 text-sm">45 个词汇需要复习</p>
                    </div>
                    <div class="w-16 h-16 bg-yellow-50 rounded-full flex items-center justify-center text-yellow-500 text-2xl">
                        <i class="fas fa-exclamation-circle"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <button class="w-full py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                        立即复习
                    </button>
                </div>
            </div>
        </div>

        <!-- 词汇学习卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="card-flip word-card">
                <div class="card-flip-inner relative w-full h-full">
                    <div class="card-front absolute w-full h-full bg-gradient-to-br from-primary to-secondary rounded-xl p-6 text-white">
                        <h3 class="text-xl font-bold mb-4">词卡翻转学习</h3>
                        <p class="text-sm opacity-90">点击卡片翻转查看释义</p>
                        <i class="fas fa-sync-alt text-3xl absolute bottom-6 right-6 opacity-50"></i>
                    </div>
                    <div class="card-back absolute w-full h-full bg-white rounded-xl p-6 shadow-lg">
                        <h3 class="text-xl font-bold text-secondary mb-2">今日推荐词汇</h3>
                        <ul class="space-y-3 text-gray-700">
                            <li class="flex items-start">
                                <span class="font-medium mr-2">1.</span>
                                <div>
                                    <p class="font-semibold">resilient</p>
                                    <p class="text-sm text-gray-600">有弹性的，适应力强的</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="font-medium mr-2">2.</span>
                                <div>
                                    <p class="font-semibold">perpetual</p>
                                    <p class="text-sm text-gray-600">永久的，持续的</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <span class="font-medium mr-2">3.</span>
                                <div>
                                    <p class="font-semibold">arbitrary</p>
                                    <p class="text-sm text-gray-600">任意的，武断的</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6 word-card">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4 text-primary text-xl">
                    <i class="fas fa-book-reader"></i>
                </div>
                <h3 class="text-lg font-semibold text-secondary mb-3">语境例句训练</h3>
                <p class="text-gray-600 mb-6">在真实场景中应用词汇，提高理解能力</p>
                <button class="w-full py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                    开始练习
                </button>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6 word-card">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4 text-primary text-xl">
                    <i class="fas fa-headphones"></i>
                </div>
                <h3 class="text-lg font-semibold text-secondary mb-3">听力辨词练习</h3>
                <p class="text-gray-600 mb-6">通过听力识别词汇，提高听力理解能力</p>
                <button class="w-full py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                    开始练习
                </button>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6 word-card">
                <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4 text-primary text-xl">
                    <i class="fas fa-pen"></i>
                </div>
                <h3 class="text-lg font-semibold text-secondary mb-3">拼写强化模块</h3>
                <p class="text-gray-600 mb-6">巩固单词拼写准确度，避免常见错误</p>
                <button class="w-full py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors">
                    开始练习
                </button>
            </div>
        </div>

        <!-- 词汇学习内容 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 待复习词汇列表 -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-secondary">待复习词汇</h3>
                    <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                </div>
                <ul class="space-y-4">
                    <li class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <div>
                            <p class="font-medium text-secondary">eloquent</p>
                            <p class="text-sm text-gray-600">雄辩的，有说服力的</p>
                        </div>
                        <span class="text-xs bg-white px-2 py-1 rounded-full text-gray-600">3小时后</span>
                    </li>
                    <li class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <div>
                            <p class="font-medium text-secondary">pragmatic</p>
                            <p class="text-sm text-gray-600">务实的，实际的</p>
                        </div>
                        <span class="text-xs bg-white px-2 py-1 rounded-full text-gray-600">5小时后</span>
                    </li>
                    <li class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <div>
                            <p class="font-medium text-secondary">ambiguous</p>
                            <p class="text-sm text-gray-600">模棱两可的</p>
                        </div>
                        <span class="text-xs bg-white px-2 py-1 rounded-full text-gray-600">明天</span>
                    </li>
                    <li class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <div>
                            <p class="font-medium text-secondary">volatile</p>
                            <p class="text-sm text-gray-600">易变的，不稳定的</p>
                        </div>
                        <span class="text-xs bg-white px-2 py-1 rounded-full text-gray-600">明天</span>
                    </li>
                </ul>
            </div>

            <!-- 学习数据分析 -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-secondary">学习数据分析</h3>
                    <div class="flex gap-2">
                        <button class="text-xs bg-blue-50 text-primary px-2 py-1 rounded">本周</button>
                        <button class="text-xs bg-white text-gray-600 border px-2 py-1 rounded">本月</button>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="learningChart"></canvas>
                </div>
            </div>

            <!-- 薄弱点诊断 -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-semibold text-secondary mb-4">薄弱点诊断</h3>
                <div class="h-64">
                    <canvas id="weaknessChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 词汇资源 -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-secondary">词汇学习资源</h3>
                <div class="flex gap-3">
                    <button class="px-4 py-2 bg-primary text-white rounded-button hover:bg-secondary transition-colors text-sm">
                        高频词汇表
                    </button>
                    <button class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors text-sm">
                        词根词缀
                    </button>
                    <button class="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors text-sm">
                        同义词辨析
                    </button>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors">
                    <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-primary mb-3">
                        <i class="fas fa-book"></i>
                    </div>
                    <h4 class="font-medium text-secondary mb-2">CET-6 核心词汇</h4>
                    <p class="text-sm text-gray-600 mb-3">包含5500个高频词汇，覆盖率达95%以上</p>
                    <a href="#" class="text-primary text-sm hover:underline flex items-center gap-1">
                        查看详情 <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors">
                    <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-primary mb-3">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h4 class="font-medium text-secondary mb-2">词根速记法</h4>
                    <p class="text-sm text-gray-600 mb-3">通过词根词缀分析，提高记忆效率</p>
                    <a href="#" class="text-primary text-sm hover:underline flex items-center gap-1">
                        查看详情 <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors">
                    <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-primary mb-3">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h4 class="font-medium text-secondary mb-2">近义词辨析</h4>
                    <p class="text-sm text-gray-600 mb-3">精确理解词义差异，提升用词准确度</p>
                    <a href="#" class="text-primary text-sm hover:underline flex items-center gap-1">
                        查看详情 <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors">
                    <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-primary mb-3">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h4 class="font-medium text-secondary mb-2">历年真题词汇</h4>
                    <p class="text-sm text-gray-600 mb-3">真题高频词汇分析，掌握考试重点</p>
                    <a href="#" class="text-primary text-sm hover:underline flex items-center gap-1">
                        查看详情 <i class="fas fa-arrow-right text-xs"></i>
                    </a>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 学习数据图表
            const learningCtx = document.getElementById('learningChart').getContext('2d');
            const learningChart = new Chart(learningCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '学习词汇数',
                        data: [15, 22, 18, 25, 20, 28, 15],
                        borderColor: '#2962FF',
                        backgroundColor: 'rgba(41, 98, 255, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // 薄弱点诊断图表
            const weaknessCtx = document.getElementById('weaknessChart').getContext('2d');
            const weaknessChart = new Chart(weaknessCtx, {
                type: 'doughnut',
                data: {
                    labels: ['拼写错误', '发音不准', '词义混淆', '易遗忘'],
                    datasets: [{
                        data: [35, 25, 20, 20],
                        backgroundColor: [
                            '#2962FF',
                            '#4CAF50',
                            '#F44336',
                            '#FF9800'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });

            // 响应式调整图表大小
            window.addEventListener('resize', function() {
                learningChart.resize();
                weaknessChart.resize();
            });
        });

        // 内嵌的auth模块
        const authModule = (function() {
            // 用户数据存储键名
            const USER_STORAGE_KEY = 'moyu_user';
            
            // DOM元素ID常量
            const AUTH_SECTION_ID = 'auth-section';
            const LOGIN_BTN_CONTAINER_ID = 'login-btn-container';
            
            // 当前用户数据
            let currentUser = null;
            
            // 初始化函数 - 在所有页面加载时调用
            function initialize() {
                // 从本地存储加载用户数据
                loadUserData();
                
                // 更新UI
                updateAuthUI();
            }
            
            // 加载用户数据
            function loadUserData() {
                const userData = localStorage.getItem(USER_STORAGE_KEY);
                if (userData) {
                    currentUser = JSON.parse(userData);
                }
            }
            
            // 保存用户数据
            function saveUserData(user) {
                localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
                currentUser = user;
            }
            
            // 清除用户数据
            function clearUserData() {
                localStorage.removeItem(USER_STORAGE_KEY);
                currentUser = null;
            }
            
            // 处理登录
            function handleLogin(userData) {
                saveUserData(userData);
                updateAuthUI();
            }
            
            // 处理登出
            function handleLogout() {
                clearUserData();
                updateAuthUI();
            }
            
            // 检查登录状态
            function isLoggedIn() {
                return currentUser !== null;
            }
            
            // 获取当前用户
            function getCurrentUser() {
                return currentUser;
            }
            
            // 更新认证UI
            function updateAuthUI() {
                const authSection = document.getElementById(AUTH_SECTION_ID);
                const loginBtnContainer = document.getElementById(LOGIN_BTN_CONTAINER_ID);
                
                if (!loginBtnContainer) return;
                
                // 清除现有内容
                loginBtnContainer.innerHTML = '';
                
                if (isLoggedIn()) {
                    // 创建用户头像和下拉菜单
                    createUserDropdown(loginBtnContainer);
                } else {
                    // 创建登录按钮
                    createLoginButton(loginBtnContainer);
                }
            }
            
            // 创建登录按钮
            function createLoginButton(container) {
                const loginBtn = document.createElement('a');
                loginBtn.href = '墨语智学登录.html';
                loginBtn.className = 'flex items-center px-4 lg:px-6 py-2 bg-blue-50 text-primary rounded-button hover:bg-blue-100 transition-colors';
                loginBtn.innerHTML = '<span class="whitespace-nowrap font-medium text-sm lg:text-base">登录</span>';
                
                container.appendChild(loginBtn);
            }
            
            // 创建用户下拉菜单
            function createUserDropdown(container) {
                // 用户头像按钮
                const avatarBtn = document.createElement('div');
                avatarBtn.className = 'relative group';
                avatarBtn.id = 'user-dropdown';
                
                // 头像图片
                const avatarImg = document.createElement('img');
                avatarImg.src = currentUser.avatar || 'https://imgur.la/images/2025/06/07/94B2FFC12D41C799B69B2668BBA16BE7.jpg';
                avatarImg.alt = currentUser.name || '用户';
                avatarImg.className = 'w-8 h-8 rounded-full cursor-pointer object-cover';
                avatarImg.style.minWidth = '32px';
                
                // 下拉菜单
                const dropdownMenu = document.createElement('div');
                dropdownMenu.className = 'absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50 origin-top-right transform transition-all duration-200 opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100';
                dropdownMenu.style.transformOrigin = 'top right';
                
                dropdownMenu.innerHTML = `
                    <div class="py-1" role="menu" aria-orientation="vertical">
                        <div class="px-4 py-2 border-b border-gray-100">
                            <p class="text-sm font-medium text-gray-900">${currentUser.name || '用户'}</p>
                            <p class="text-xs text-gray-500">${currentUser.username || ''}</p>
                        </div>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-user mr-2"></i>个人中心
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-cog mr-2"></i>设置
                        </a>
                        <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary transition-colors" role="menuitem">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                `;
                
                avatarBtn.appendChild(avatarImg);
                avatarBtn.appendChild(dropdownMenu);
                container.appendChild(avatarBtn);
                
                // 添加登出按钮事件
                const logoutBtn = dropdownMenu.querySelector('#logout-btn');
                if (logoutBtn) {
                    logoutBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        handleLogout();
                    });
                }
                
                // 点击外部关闭菜单
                document.addEventListener('click', function(e) {
                    if (!avatarBtn.contains(e.target)) {
                        dropdownMenu.classList.remove('opacity-100', 'scale-100');
                        dropdownMenu.classList.add('opacity-0', 'scale-95');
                    }
                });
            }
            
            // 公共API
            return {
                initialize,
                handleLogin,
                handleLogout,
                isLoggedIn,
                getCurrentUser
            };
        })();

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            authModule.initialize();
        });
    </script>
</body>
</html>